<!--  -->
<template>
  <div class>
    <el-dialog
      :visible.sync="visibleDialog"
      @close="$emit('update:isHireRelet', false)"
      :show="isHireRelet"
      title="续租"
    >
      <el-form :model="formData" label-width="90px" label-position="right">
        <el-card class="card-type">
          <div slot="header" class="clearfix">
            <span>承租人信息</span>
          </div>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="性别">
                <el-radio-group v-model="formData.sex">
                  <el-radio label="男"></el-radio>
                  <el-radio label="女"></el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="承租人">
                <el-input v-model="formData.Charter" placeholder="承租人"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="承租人性质">
                <el-input v-model="formData.userProperty" placeholder="承租人性质"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="是否低保">
                <el-radio-group v-model="formData.isLow">
                  <el-radio label="是"></el-radio>
                  <el-radio label="否"></el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="联系电话">
                <el-input v-model="formData.Phone" placeholder="联系电话"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="单位联系人">
                <el-input v-model="formData.contact" placeholder="审批人"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="信誉等级">
                <el-select v-model="formData.level" placeholder="1">
                  <el-option label="1" value="shanghai"></el-option>
                  <el-option label="2" value="beijing"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="证件类型">
                <el-select v-model="formData.CardType" placeholder="1">
                  <el-option label="1" value="shanghai"></el-option>
                  <el-option label="2" value="beijing"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="16">
              <el-form-item label="证件号码">
                <el-input v-model="formData.IDNo" placeholder="证件号码"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="经营项目">
                <el-select v-model="formData.project" placeholder="1">
                  <el-option label="1" value="shanghai"></el-option>
                  <el-option label="2" value="beijing"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="16">
              <el-form-item label="店名">
                <el-input v-model="formData.tradeName" placeholder="店名"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>
        <el-card class="card-type">
          <div slot="header" class="clearfix">
            <span>租赁信息</span>
          </div>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="租赁性质">
                <el-select v-model="formData.rentProperty" placeholder="1">
                  <el-option label="1" value="shanghai"></el-option>
                  <el-option label="2" value="beijing"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="收租类型">
                <el-select v-model="formData.rentType" placeholder="1">
                  <el-option label="1" value="shanghai"></el-option>
                  <el-option label="2" value="beijing"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="计租面积">
                <el-input v-model="formData.rentArea" placeholder="店名"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="月租金">
                <el-input v-model="formData.hire" placeholder="店名"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="是否递增">
                <el-select v-model="formData.augment" placeholder="是否递增">
                  <el-option label="不递增" value="0"></el-option>
                  <el-option label="递增" value="1"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="租金递增">
                <el-input v-model="formData.increment" placeholder="店名"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="递增类型">
                <el-select v-model="formData.augment" placeholder="递增类型">
                  <el-option label="每年递增" value="0"></el-option>
                  <el-option label="一次性递增" value="1"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="开始递增">
                <el-input v-model="formData.augmentDate" placeholder="店名"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="签订日期">
                <el-select v-model="formData.signDate" placeholder="1">
                  <el-option label="1" value="shanghai"></el-option>
                  <el-option label="2" value="beijing"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="合同编号">
                <el-input v-model="formData.contractNo" placeholder="合同编号"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="16">
              <el-col :span="10">
                <el-form-item label="起止日期">
                  <el-date-picker
                    clearable
                    v-model="StartEndDate"
                    value-format="timestamp"
                    start-placeholder="合同开始日期"
                    range-separator="至"
                    end-placeholder="合同结束日期"
                    type="datetimerange"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="合同总额">
                <el-input v-model="formData.totalMoney" placeholder="合同总额"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="保证金">
                <el-input v-model="formData.margin" placeholder="保证金"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="经办人">
                <el-input v-model="formData.agent" placeholder="经办人"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="备注">
            <el-input v-model="formData.note" label="备注"></el-input>
          </el-form-item>
        </el-card>
        <el-card class="card-type">
          <div slot="header" class="clearfix">
            <span>附件上传</span>
          </div>
          <upload-file></upload-file>
        </el-card>
        <el-row>
          <el-button icon="el-icon-download" style="float: right; " type="primary" size="mini">打印合同</el-button>
          <el-button
            icon="el-icon-download"
            style="float: right; "
            type="primary"
            size="mini"
            @click="isRelet"
          >确定续租</el-button>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import uploadFile from "@/views/upload/uploadFile";
import { rentOut } from "@/api/rent";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: { uploadFile },
  data() {
    //这里存放数据
    return {
      visibleDialog: this.isHireRelet,
      formData: {
        assetData: [{ money: "", address: "", build_area: "", guid: "" }]
      },
      StartEndDate: []
    };
  },
  props: {
    isHireRelet: {
      type: Boolean,
      default: false
    },
    reletData: {
      type: Array,
      defualt: []
    }
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    isHireRelet() {
      this.visibleDialog = this.isHireRelet;
    },
    reletData(val) {
      console.log("val" + val);
      this.getSelection();
    }
  },
  //方法集合
  methods: {
    getSelection() {
      this.$nextTick(_ => {
        this.formData = this.reletData;
        this.startDate = Date.parse(this.formData.ChartBeginDate);
        this.endDate = Date.parse(this.formData.ChartEndDate);
        this.StartEndDate.push(this.startDate);
        this.StartEndDate.push(this.endDate);
      });
    },
    // 续租
    isRelet() {
      this.formData["OldChartGUID"] = this.formData.ChartGUID;
      this.formData["Relet"] = 1;
      rentOut(this.formData).then(response => {
        console.log(response);
      });
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    // this.formData.assetData = this.rentData;
    // console.log("xzxx" + this.rentData);
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.card-type {
  // padding: 20px;
  padding-right: 15px;
  margin-bottom: 30px;
}
</style>